import React, { Component } from 'react'
import { Form, Input, Button, Row, Col, Tabs, Modal } from 'antd'
import { withRouter } from 'react-router-dom'
import CommTable from '@/components/commTable'
import AntdConfigure from "@/assets/utils/antdConfigure.js"
import AddSubject from './components/addSubject'
import AddTestSubject from './components/addTestSubject'
import ModalConfigure from "@/assets/utils/modalConfigure";
class CommPageHeader extends Component {
    constructor(props) {
        super(props)
        this.state = {
            activeKey: '01',
            columns: [
                {
                    key: "name",
                    title: "科目名称",
                    ellipsis: true,
                    dataIndex: "name",
                },
                {
                    key: "type",
                    title: "操作",
                    width: 160,
                    align: "center",
                    render: (item) => {
                        return (
                            <>
                                <Button type="primary" onClick={this.addFn.bind(this, item)}>编辑</Button>
                                <Button type="primary" onClick={this.deleteFn.bind(this, item)} danger>删除</Button>
                            </>
                        )
                    },
                    showSorterTooltip: true
                },
            ],
            data: [{ key: '1', name: "科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1", type: 2 }, { key: 2, name: "科目名称2", type: 1 }],
            columns1: [
                {
                    key: "name",
                    title: "科目名称",
                    ellipsis: true,
                    alignHeader: "center",
                    dataIndex: "name",
                },
                {
                    key: "sex",
                    title: "适用性别",
                    dataIndex: "sex",
                    width: 100,
                    align: 'center',
                    render: (item) => {
                        return ((item || '').split(',').map(v => {
                            return v == 1 ? '男' : '女'
                        })).join(";")
                    }
                },
                {
                    key: "type",
                    title: "操作",
                    width: 160,
                    align: "center",
                    render: (item) => {
                        return (
                            <>
                                <Button type="primary" onClick={this.addTestFn.bind(this, item)}>编辑</Button>
                                <Button type="primary" danger onClick={this.deleteTestFn.bind(this, item)}>删除</Button>
                            </>
                        )
                    },
                    showSorterTooltip: true
                },
            ],
            data1: [{ key: '1', sex: "1,2", name: "科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1科目名称1", type: 2 }, { key: 2, sex: "1", name: "科目名称2", type: 1 }],
            pagination: {
                position: AntdConfigure.position,
                current: 1,
                pageSize: AntdConfigure.pageSize,
                total: 100,
                pageSizeOptions: AntdConfigure.pageSizeOptions,
                onChange: this.changePageFn,
                onShowSizeChange: this.changePageSizeFn
            }
        }
    }

    changePageFn = (page, pageSize) => {
        let pagination = this.state.pagination;
        pagination['current'] = page
        this.setState({ pagination })
    }
    changePageSizeFn = (page, pageSize) => {
        let pagination = this.state.pagination;
        pagination['pageSize'] = pageSize
        this.setState({ pagination })
    }
    tabClickFn = (key, event) => {
        if (this.state.activeKey != key) {
            this.setState({ activeKey: key })
        }
    }
    addFn = (data = "") => {

        this.refs.addSubject.initFn(data)
    }
    deleteFn(data) {
        Modal.confirm({
            ...ModalConfigure,
            icon: undefined,
            title: "删除学习科目",
            content: "您确定要删除该学习科目吗？",
            onOk() {
                console.log('OK');
            },
            onCancel() {
                console.log('Cancel');
            },
        })
    }
    addTestFn = (data = "") => {

        this.refs.addTestSubject.initFn(data)
    }
    deleteTestFn(data) {
        Modal.confirm({

            title: "删除体测科目",
            content: "您确定要删除该体测科目吗？",
            onOk() {
                console.log('OK');
            },
            onCancel() {
                console.log('Cancel');
            },
        })
    }
    render() {
        return (
            <Tabs type="card" className="mg-t-10" activeKey={this.state.activeKey} onTabClick={this.tabClickFn}>
                <Tabs.TabPane tab="学习科目" key="01">
                    <Form className="comm-from" size="middle">
                        <Row>
                            <Col span={8} className="pd-r-10">
                                <Form.Item>
                                    <Input placeholder="请输入名称搜索" />
                                </Form.Item>
                            </Col>
                            <Col span={16} className="pd-r-10">
                                <Form.Item>
                                    <Button type="primary">搜索</Button>
                                    <Button type="primary" onClick={this.addFn.bind(this, "")}>添加</Button>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                    <CommTable columns={this.state.columns} pagination={this.state.pagination} dataSource={this.state.data}></CommTable>
                    <AddSubject ref="addSubject"></AddSubject>
                </Tabs.TabPane>
                <Tabs.TabPane tab="体测科目" key="02">
                    <Form className="comm-from" size="middle">
                        <Row>
                            <Col span={8} className="pd-r-10">
                                <Form.Item>
                                    <Input placeholder="请输入名称搜索" />
                                </Form.Item>
                            </Col>
                            <Col span={16} className="pd-r-10">
                                <Form.Item>
                                    <Button type="primary">搜索</Button>
                                    <Button type="primary" onClick={this.addTestFn.bind(this, '')}>添加</Button>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                    <CommTable columns={this.state.columns1} pagination={this.state.pagination} dataSource={this.state.data1}></CommTable>
                    <AddTestSubject ref="addTestSubject"></AddTestSubject>
                </Tabs.TabPane>

            </Tabs>
        )
    }
}
export default withRouter(CommPageHeader)